<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.yeye {
				width: 500px;
				height: 500px;
				background-color: pink;
			}

			.father {
				width: 350px;
				height: 350px;
				background-color: rgb(228, 150, 6);
			}

			.son {
				width: 200px;
				height: 200px;
				background-color: purple;
			}
		</style>
	</head>

	<body>
		<div class="yeye">
			<div class="father">
				<div class="son"></div>
			</div>
		</div>
		<script>
			const yeye = document.querySelector(".yeye");
			const fa = document.querySelector(".father");
			const son = document.querySelector(".son");
			// 福建  龙岩  闽大   望云楼   捕获阶段
			// 望云楼  闽大   龙岩  福建   冒泡阶段
			yeye.addEventListener("click", function () {
				alert("我是最大");
			});
			fa.addEventListener("click", function () {
				alert("我是中间");
			});
			son.addEventListener("click", function (e) {
				alert("我是最小");
				// 阻止传播 (利用事件对象的stopPropagation()方法)
				e.stopPropagation();
			});
		</script>
	</body>
</html>
